<template>
  <div @click="checked = !checked" class="checkbox">
    <div :class="boxStyle"></div>
    <label class="label">显示最高温度</label>
    <input type="checkbox" v-model="checked" />
  </div>
</template>

<script>
import { computed, ref } from "@vue/composition-api";
export default {
  props: {
      borderColor: {
          type: String,
          required: false,
      }
  },
  setup() {
    const checked = ref(true);
    const boxStyle = computed((ctx) => {
      if (checked.value) {
        return "box box-checked";
      } else {
        return "box";
      }
    });
    return {
      checked,
      boxStyle,
    };
  },
};
</script>

<style scoped>
.checkbox {
  display: inline-block;
  cursor: pointer;
}
.checkbox > input[type="checkbox"] {
  width: 0;
  height: 0;
}
.checkbox > .box {
  width: 14px;
  height: 14px;
  background-color: rgba(49, 148, 248, 0.15);
  border: 1px solid #3399ff;
  border-radius: 2px;
  margin-right: 9px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  transition: background-color .2s;
}
.checkbox > .box-checked {
    background-color: rgba(49, 148, 248, 0.85);
}
.checkbox > .label {
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
}
.checkbox > .box::after {
  content: "";
  display: block;
  position: absolute;
  width: 7px;
  height: 3px;
  top: 3px;
  left: 3px;
  border: 1px solid;
  border-color: transparent transparent #00e7ff #00e7ff;
  transform: rotate(-45deg) scale(0);
  transition: transform .1s .1s;
  transform-origin: center;
}
.checkbox > .box-checked::after {
  transform: rotate(-45deg) scale(1);
}
</style>